<template>
  <div class="app-container">
    <el-descriptions :column="1" class="out-border mb10">
      <el-descriptions-item label="POI编号">{{poiInfo&&poiInfo.id}}</el-descriptions-item>
      <el-descriptions-item label="经纬度">
        东经{{ poiInfo && poiInfo.addressLongitude }}，北纬{{
        poiInfo && poiInfo.addressLatitude
        }}
      </el-descriptions-item>
      <el-descriptions-item
        label="省市区"
      >{{ poiInfo && poiInfo.province + poiInfo.city + poiInfo.area }}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ poiInfo && poiInfo.address }}</el-descriptions-item>
      <el-descriptions-item
        label="来源"
      >{{ poiInfo && poiInfo.onboardingSource | filterOnboardingSource }}</el-descriptions-item>
      <el-descriptions-item label="归属人">
        {{ poiInfo && poiInfo.workerName }}
        <el-link type="primary" class="ml10" @click="onViewOrder(poiInfo)">查看</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="状态">{{ poiInfo && poiInfo.status == "YES" ? "有效" : "失效" }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ poiInfo && poiInfo.createTime}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" class="out-border mb10">
      <el-descriptions-item label="是否实体店">{{ poiInfo && poiInfo.storesFlag | filterStoresFlag }}</el-descriptions-item>
      <el-descriptions-item label="门头照片" v-if="poiInfo && poiInfo.storesFlag == 'YES'">
        <el-image
          v-for="item in poiInfo.storesImageUrl.split(',')"
          :key="item"
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="poiInfo.storesImageUrl.split(',')"
        ></el-image>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      :column="1"
      class="out-border mb10"
      v-if="poiInfo && poiInfo.storesFlag == 'YES'"
    >
      <el-descriptions-item label="地图">
        <div style="text-align: left">
          <el-button class="mt0">
            <!-- :href="`https://lbs.amap.com/tools/showmap/?location=${poiInfo.addressLatitude},${poiInfo.addressLongitude}&title=${poiInfo.address}&content=${poiInfo.address}&output=html`" -->
            <el-link
              :underline="false"
              :href="`https://www.amap.com/search?query=${poiInfo.address}&city=${poiInfo.city}&geoobj=${poiInfo.addressLongitude}|${poiInfo.addressLatitude}&zoom=11`"
              target="_blank"
            >打开地图</el-link>
          </el-button>
          <Map
            class="mt20"
            v-if="poiInfo"
            :lng="poiInfo.addressLongitude"
            :lat="poiInfo.addressLatitude"
          />
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { apiPoiDetail } from "@/api/poi";
import Map from "@/components/Map/index.vue";
export default {
  components: { Map },
  data() {
    return {
      poiInfo: null,
      workerId: ""
    };
  },
  mounted() {
    const { workerId } = this.$route.query;
    if (workerId) {
      this.workerId = workerId;
      this.getData();
    }
  },
  methods: {
    getData() {
      apiPoiDetail({ workerId: this.workerId }).then(res => {
        this.poiInfo = res.data;
      });
    },
    onViewOrder(row) {
      this.$router.push({
        path: `/worker/personDetail?workerId=${row.workerId}`
      });
    }
  }
};
</script>
